//base
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
//redux
import { connect } from '@tarojs/redux'
import {
  DOREQUESTCITYLOCATION,
  DOREQUESTRECENTLY,
  DOREQUESTONSEARCH
} from './store/actions/pagecitylocation'
import { UPDATEPAGECITYLOCATION } from './store/types/pagecitylocation'
//less
import './index.less'
import { AtIndexes } from 'taro-ui'
//异步加载reducer
//componnet
import NetworkError from '../../../components/taro-ui/network-error'
//libs
import { showModal } from '../../../crossplatform/apiservice/toast'
import pagecitylocation from './store/reducers/pagecitylocation'
import { getStore } from '../../../store/index'
import { injectReducer } from '../../../store/reducerUtils'
import LocationSearch from './components/location-search'
import RecentlyTheLogin from './components/recently-the-login'
import { UPDATELANDMARK } from '../../../store/types/landmark'
import { navigateBack } from '../../../crossplatform/apiservice/navigate'

const store = getStore()
injectReducer(store, {
  key: 'pagecitylocation',
  reducer: pagecitylocation
})

const mapActiontoProps = dispatch => ({
  updateState (payload) {
    dispatch({
      type: UPDATEPAGECITYLOCATION,
      payload: {
        ...payload
      }
    })
  },
  updateLandmark (payload) {
    dispatch({
      type: UPDATELANDMARK,
      payload: {
        ...payload
      }
    })
  },
  queryRecentlyList () {
    dispatch(DOREQUESTRECENTLY())
  },
  queryOnSearch (payload) {
    dispatch(DOREQUESTONSEARCH(payload))
  },
  dorequest () {
    return new Promise(resolve => {
      let promise = DOREQUESTCITYLOCATION()
      dispatch(promise)
      promise.payload.then(data => {
        resolve(data)
      })
    })
  }
})

@connect(
  ({pagecitylocation, landmark}) => ({
    ...pagecitylocation,
    landmarkName: landmark.landmarkName
  }),
  mapActiontoProps
)
class CityLocation extends Component {
  config = {
    navigationBarTitleText: '切换城市'
  }

  componentWillMount () {
    //onLoad
    this.queryWrap()
  }

  componentDidMount () {
    //onready
  }

  componentDidShow () {
    //onshow
  }

  componentDidHide () {
    //onhide
  }

  componentWillUnmount () {
    //onUnload
  }

  queryWrap = () => {
    this.props.dorequest()
    this.props.queryRecentlyList()
  }

  onReload = () => {
    const sharepayload = this.$router.params
    this.queryWrap(sharepayload)
  }

  onSearch = ({value}) => {
    if (value) {
      this.props.queryOnSearch({value})
    } else {
      this.queryWrap()
    }
  }

  delay (time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }

  onChangeCity = ({cityName, id}) => {
    showModal({
      title: '提示',
      content: `确认切换到 ${cityName} 吗？`
    }).then(({confirm}) => {
      if (confirm) {
        this.props.updateLandmark({
          landmarkName: cityName,
          cityId: id
        })
        navigateBack()
      }
    })
  }

  render () {
    const {landmarkName, recentlyList, cityList} = this.props
    return (
      <View className="CityLocation_id60581">
        <NetworkError visible={this.props.networkerror} onReload={this.onReload}/>
        <View
          className={`CityLocation_id60581Wrap ${this.props.networkerror ? 'hide' : ''}`}
          style="height:100vh"
        >
          <AtIndexes
            list={cityList}
            onClick={this.onChangeCity}
            isVibrate={false}
            isShowToast={false}
            animation={true}
            className="index-container"
          >
            <LocationSearch landmarkName={landmarkName} onSearch={this.onSearch}/>
            <RecentlyTheLogin dataSource={recentlyList} onChangeCity={this.onChangeCity}/>
          </AtIndexes>
        </View>
      </View>
    )
  }
}

export default CityLocation
